<template>
  <view class="tenderingBidding">
    <view class="searchBox">
      <u-search style="width: 100%;" maxlength="45" placeholder="请输入昵称搜索" :action-style="actionStyle" search-icon="/static/images/search.png" v-model="form.search" @clear="onSearch('clear')" action-text="搜索" @custom="onSearch('search')"></u-search>
    </view>
    <scroll-view @scrolltolower="scrolltolower" refresher-background="rgba(0, 0, 0, 0)" class="scrollView" refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" @refresherrefresh="onRefresh" @refresherrestore="onRestore" :style="{'height':  'calc('+ screenHeight  +'px' +' ' + '-' +' ' +'98rpx)'}" scroll-y="true">
      <view class="scrollCont">
        <view v-for="(item,index) in list" @click="toDetail(item,index)" :key="index" class="part flex-center-between">
          <image :src=item.main_image mode=""></image>
          <view class="detail">
            <text class="detail-top">
              {{item.title}}
            </text>
            <view class="detail-bottom flex-center-between">
              <text class="price">
                ￥{{item.price}}
              </text>
              <text class="time">
                {{ item.createtime }}
              </text>
            </view>
          </view>
        </view>
        <view class="nodata-st" v-if="form.page==form.last_page"> ------没有更多数据了------</view>
        <view class="nodata-st" v-if="list.length ==0"> ------暂无数据------</view>

      </view>
    </scroll-view>

  </view>
</template>

<script>  

import api from '@/api/index.js';
export default {
  data() {
    return {
      value: '',
      actionStyle: {
        'font-size': '28rpx',
        'font-family': 'PingFang SC-Medium, PingFang SC',
        'font-weight': '500',
        'color': '#999999',
      },

      screenHeight: '',
      triggered: true,
      list: [],
      form: {
        page: 1,
        page_size: 10,
        last_page: 0,
        search: ''
      },
    }
  },
  onLoad() {
    this._freshing = false;
    setTimeout(() => {
      this.triggered = true;
    }, 1000);

    const result = uni.getSystemInfoSync();
    let safeAreaBottom = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().safeArea.height;
    this.screenHeight = uni.getStorageSync('screenHeight') - safeAreaBottom;
    this.init()

  },
  methods: {
    init() {
      this.form.page = 1;
      this.form.last_page = 0;
      this.getpage()
    },
    getpage() {
      api.base.getDev_inviteList({ ...this.form, ...this.query }).then(res => {
        if (res.code == 1) {
          this.list = this.form.page === 1 ? res.data.data : this.list.concat(res.data.data);
          this.form.last_page = res.data.last_page;
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      setTimeout(() => {
        this.init()
        this.triggered = false;
        this._freshing = false;
      }, 1000)
    },
    onRestore() {
      this.triggered = 'restore'; // 需要重置
      console.log("onRestore");
    },
    scrolltolower() {
      if (this.form.page < this.form.last_page) {
        this.form.page += 1;
        this.getpage();
      }
    },
    onSearch(type) {
      if (type == 'clear') {
        this.form.search = ''
      };
      this.init()
    },
    toDetail(item, index) {
      uni.navigateTo({
        url: '/pages/tenderingBidding/detail?id=' + item.id
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tenderingBidding {
  .scrollView {
    .scrollCont {
      display: flex;
      flex-direction: column;
      align-items: center;

      .part {
        width: 686rpx;
        height: 232rpx;
        background: #ffffff;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        padding: 20rpx 14rpx 20rpx 16rpx;
        box-sizing: border-box;
        margin-top: 24rpx;

        image {
          width: 256rpx;
          height: 192rpx;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
        }

        .detail {
          width: 382rpx;
          height: 192rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          &-top {
            width: 382rpx;
            font-size: 28rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #333333;
            line-height: 42rpx;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            /* 这里是超出几行省略 */
            overflow: hidden;
          }

          &-bottom {
            .price {
              height: 32rpx;
              font-size: 28rpx;
              font-family: HarmonyOS Sans-Bold, HarmonyOS Sans;
              font-weight: bold;
              color: #ff2544;
              line-height: 33rpx;
            }

            .time {
              height: 30rpx;
              font-size: 22rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #999999;
              line-height: 26rpx;
            }
          }
        }
      }
    }
  }
}
</style>